<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:29
-->
<template>
  <div class="list">
    <div class="wrapper">
      <div
        @click="toArtDetails(item.id)"
        class="article"
        v-for="item in data"
        :key="item.id"
      >
        <div class="left">
          <img width="100%" :src="item.cover" alt="" />
        </div>
        <div class="right">
          <div class="name">
            {{ item.title }}
          </div>
          <div class="time">
            {{ fmtDate(item.publishTime) }}
          </div>
          <div class="readTimes">
            <div>
              <img width="25px" src="../assets/阅读.png" alt="" />阅读次数:
              {{ item.readTimes }}
            </div>
            <div>
              <img width="23px" src="../assets/点赞.png" alt="" />点赞次数:
              {{ item.readTimes }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fmtDate } from "../filters/index";
import { get } from "../utils/request";
export default {
  data() {
    return {
      // 向后台传递的参数
      list: {
        page: 1,
        pageSize: 10,
        categoryId: this.$route.query.categoryId,
      },

      // 接受后台返回的数据
      data: {},
    };
  },
//帧听器
  watch:{
    '$route.query.categoryId':function(){
      this.list.categoryId = this.$route.query.categoryId;
      //刷新页面
      this.findListByCategoryId()
    }
  },
  methods: {
    // 时间戳转换
    fmtDate,
    //
    findListByCategoryId() {
      get("/index/article/pageQuery", this.list).then((res) => {
        if (res.status == 200) {
          // 赋值
          this.data = res.data.list;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    // 跳转到风采详情
    toArtDetails(id) {
      this.$router.push({
        path: "/article",
        query: { id: id },
      });
    },
  },

  created() {
    this.findListByCategoryId();
  },
};
</script>

<style lang="scss" scoped>
.list {
  .wrapper {
    width: 1240px;
    padding: 1em 0;
    // height: 1500px;
    // background-color: rgb(162, 156, 199);
    .article {
      display: flex;
      // padding: 1em 0;
      height: 150px;
      cursor: pointer;
      .left {
        width: 200px;
        height: 120px;
        background-color: #ccc;
        border-radius: 5px;
        overflow: hidden;
      }
      .right {
        flex: 1;
        // background-color: rgb(207, 205, 91);
        padding: 0 2em;
        .time {
          margin: 1em 0;
        }
        .readTimes{
          div{
            img{
              transform: translate(-1px,5px);
            }
          }
        }
      }
    }
  }
}
</style>